{extend name="common/layout" /}
{block name="main"}

<t-space style="width: 100%;">
  <t-row justify="space-between">
    <t-col :flex="4" style="margin-right: 10px;">
      <t-card bordered header style="background-color: #0052d9;">
        <t-row>
          <t-col :flex="4">
            <div style="margin-bottom: 15px; color: white;">本月利润</div>
            <div style="font-size: 24px; font-weight: bold; color: white;">{{cardData.profit}}</div>
          </t-col>
          <t-col :flex="2" style="margin: 10px 0px 10px 10px;">
            <t-icon name="money" style="color: white" size="3em" />
          </t-col>
        </t-row>
      </t-card>
    </t-col>
    <t-col :flex="4" style="margin-right: 10px;">
      <t-card bordered header>
        <t-row>
          <t-col :flex="4">
            <div style="margin-bottom: 15px;">待收金额</div>
            <div style="font-size: 24px; font-weight: bold; color: #0052d9;">{{cardData.pending_amount}}</div>
          </t-col>
          <t-col :flex="2" style="margin: 10px 0px 10px 10px;">
            <t-icon name="money" style="color: #0052d9" size="3em" />
          </t-col>
        </t-row>
      </t-card>
    </t-col>
    <t-col :flex="3" style="margin-right: 10px;">
      <t-card bordered header>
        <t-row>
          <t-col :flex="3">
            <div style="margin-bottom: 15px;">闲置房间</div>
            <div style="font-size: 24px; font-weight: bold; color: #0052d9;">{{cardData.empty_count}}</div>
          </t-col>
          <t-col :flex="2" style="margin: 10px 0px 10px 10px;">
            <t-icon name="window-1" style="color: #0052d9" size="3em" />
          </t-col>
        </t-row>
      </t-card>
    </t-col>
    <t-col :flex="3" style="margin-right: 10px;">
      <t-card bordered header>
        <t-row>
          <t-col :flex="3">
            <div style="margin-bottom: 15px;">入住率</div>
            <div style="font-size: 24px; font-weight: bold; color: #0052d9;">{{cardData.occupancy}}</div>
          </t-col>
          <t-col :flex="2" style="margin: 10px 0px 10px 10px;">
            <t-icon name="calculator-1" style="color: #0052d9" size="3em" />
          </t-col>
        </t-row>
      </t-card>
    </t-col>
    <t-col :flex="3" style="margin-right: 10px;">
      <t-card bordered header>
        <t-row>
          <t-col :flex="3">
            <div style="margin-bottom: 15px;">总房间数</div>
            <div style="font-size: 24px; font-weight: bold; color: #0052d9;">{{cardData.number_count}}</div>
          </t-col>
          <t-col :flex="2" style="margin: 10px 0px 10px 10px;">
            <t-icon name="houses-2" style="color: #0052d9" size="3em" />
          </t-col>
        </t-row>
      </t-card>
    </t-col>
    <t-col :flex="3">
      <t-card bordered header>
        <t-row>
          <t-col :flex="1">
            <div style="margin-bottom: 15px;">账号截止日期</div>
            <div style="font-size: 24px; font-weight: bold; color: #0052d9; margin-bottom: 3px;">
              {$layout_login_user.expiration_date|date='Y-m-d'}</div>
          </t-col>
        </t-row>
      </t-card>
    </t-col>
  </t-row>
</t-space>

<t-space direction="vertical" style="width: 100%; margin-top: 10px;">
  <t-row justify="space-between">
    <t-col :flex="7" style="margin-right: 10px;">
      <t-card bordered>
        <div style="margin-bottom: 20px;">
          年度财务收支走势
        </div>
        <div id="c1"></div>
      </t-card>
    </t-col>
    <t-col :flex="3">
      <t-card bordered style="margin-bottom: 10px;">
        <div style="margin-bottom: 10px;">
          收租提醒
        </div>
        <t-table :data="billBata" :columns="columns" row-key="id" vertical-align="top" :bordered="true" size="small"
          :show-header="false" @row-dblclick="onRowClick">
        </t-table>
      </t-card>
      <t-card bordered>
        <div style="margin-bottom: 10px;">
          合同提醒
        </div>
        <t-table :data="contractData" :columns="columnsContract" row-key="id" vertical-align="top" :bordered="true"
          size="small" :show-header="false" @row-dblclick="onContractClick">
        </t-table>
      </t-card>
    </t-col>
  </t-row>
</t-space>

{/block}

{block name="script"}
<script>
  const data = {
    cardData: {},
    pending_amount: 0,
    billBata: [],
    contractData: [],
    columns: [
      {
        colKey: 'start_time',
        className: ({ row }) => {
          const startDate = new Date(row.start_time);
          const today = new Date();
          const threeDaysLater = new Date(today);
          threeDaysLater.setDate(today.getDate() + 3);
          if (startDate < threeDaysLater && startDate > today) {
            return 'cell-orange';
          }
          if (startDate <= today) {
            return 'cell-red';
          }
          return '';
        },
      },
      { colKey: 'property_name', },
      { colKey: 'number_name', },
    ],
    columnsContract: [
      {
        colKey: 'end_date',
        className: ({ row }) => {
          const startDate = new Date(row.end_date);
          const today = new Date();
          const threeDaysLater = new Date(today);
          threeDaysLater.setDate(today.getDate() + 3);
          if (startDate < threeDaysLater && startDate > today) {
            return 'cell-orange';
          }
          if (startDate <= today) {
            return 'cell-red';
          }
          return '';
        },
      },
      { colKey: 'property_name', },
      { colKey: 'number_name', },
    ],
  };
  function f() {
    return {
      init: function () {
        axiosGet("{:url('queryHouseInfo')}").then(response => {
          if (response.code == 1) {
            this.cardData = response.data;
            this.cardData.pending_amount = this.pending_amount;
          } else {
            this.$message.error('系统出错了!!!');
          }
        });

        axiosGet("{:url('queryBill')}").then(response => {
          if (response.code == 1) {
            this.billBata = response.data;
            this.cardData.pending_amount = response.msg;
            this.pending_amount = response.msg;
          } else {
            this.$message.error('系统出错了!!!');
          }
        });

        axiosGet("{:url('queryContract')}").then(response => {
          if (response.code == 1) {
            this.contractData = response.data;
          } else {
            this.$message.error('系统出错了!!!');
          }
        });

        axiosGet("{:url('echar')}").then(response => {
          if (response.code == 1) {
            const data = response.data
            // Step 1: 创建 Chart 对象
            const chart = new G2.Chart({
              container: 'c1', // 指定图表容器 ID
              forceFit: true,
              height: 420,
              padding: [10, 25, 60, 40],
            });
            chart.source(data, {
              month: {
                range: [0, 1]
              },
              money: {
                nice: true,
              },
            });

            chart.tooltip({
              crosshairs: {
                type: 'line'
              }
            });

            chart.axis('money', {
              label: {
                formatter: (val) => {
                  // return val + ' °C';
                  return val;
                },
              },
            });

            chart
              .line()
              .position('month*money')
              .color('project', ['#0052d9', '#e37318', '#2ba471'])
              .shape('smooth');

            chart
              .point()
              .position('month*money')
              .color('project', ['#0052d9', '#e37318', '#2ba471'])
              .shape('circle');

            chart.render();
          } else {
            this.$message.error('系统出错了!!!');
          }
        });
      },
      onRowClick: function (data) {
        if (data.row.house_property_id != this.houseDef) {
          axiosPost("{:url('house.property/sort')}", { 'id': data.row.house_property_id }).then(response => {
            if (response.state == 'success') {
              location.href = "{:url('house.uncollected/index')}";
            } else {
              console.log('房产切换失败');
            }
          });
        } else {
          location.href = "{:url('house.uncollected/index')}";
        }
      },
      onContractClick: function (data) {
        if (data.row.house_property_id != this.houseDef) {
          axiosPost("{:url('house.property/sort')}", { 'id': data.row.house_property_id }).then(response => {
            if (response.state == 'success') {
              location.href = "{:url('house.contract/index')}";
            } else {
              console.log('房产切换失败');
            }
          });
        } else {
          location.href = "{:url('house.contract/index')}";
        }
      },
    }
  }
</script>
<style>
  td.cell-red {
    color: red;
  }

  td.cell-orange {
    color: orange;
  }
</style>
{/block}